<template>
  <t-image-viewer v-if="!store.isMobileType" v-model:visible="ImgVisible" :images="[urls + props.info.value]">
  </t-image-viewer>
  <van-image-preview :show-index="false" v-else v-model:show="ImgVisible" :images="[urls + props.info.value]">
  </van-image-preview>
  <div class="outline-parent">
    <div
      class="outline-parent-bg border-hover-style"
      :style="{
        backgroundImage: `url(${publicUrls + 'free/style9/auxiliaryStyle1Bg.webp'})`,
      }"
    >
      <div class="showroom-parent" v-if="props.info.digitalShowroom">
        <digitalShowroomIcon :url="props.info.digitalShowroom" :id="props.info.id" />
      </div>
      <div
        class="audio-box"
        :class="isPlay && 'audio-rotate'"
        v-if="props.info.audio && props.info.audio.url"
        @click="audioplay(true)"
      >
        <i class="doorIcon">&#xe688;</i>
        <!-- <img
          :src="publicUrls + 'free/style9/playAudioBtn.webp'"
          alt=""
          class="audio-btn null-hover"
        />
        <img
          :src="publicUrls + 'free/style9/playAudioBtnHover.webp'"
          alt=""
          class="audio-btn hover-btn"
        /> -->
      </div>
      <audio v-if="props.info.audio && props.info.audio.url" :src="urls + props.info.audio.url" ref="audioRef"></audio>
      <div class="auxiliary-content-box" :class="{ 'only-img-video': !props.info.subTitle && !props.info.remarks }">
        <div class="auxiliary-img-box" v-if="props.info.value || (props.info.video && props.info.video?.url)">
          <t-image
            v-if="props.info.value && !(props.info.video && props.info.video?.url)"
            fit="contain"
            position="center"
            class="auxiliary-img"
            @click="ImgVisible = true"
            :src="urls + props.info.value + '?imageView2/3/format/webp'"
            alt=""
          />
          <videoview @click="audioplay(false)" :info="props.info"></videoview>
        </div>
        <div class="auxiliary-text-box">
          <p class="title" v-if="props.info.text">{{ props.info.text }}</p>
          <p
            class="sub-title"
            :class="{ 'null-img': !props.info.value && !props.info.video && !props.info.video?.url }"
            v-if="props.info.subTitle"
          >
            ——{{ props.info.subTitle }}
          </p>
          <div class="remarks1" v-if="props.info.value || (props.info.video && props.info.video.url)">
            <TextMax
              :infoData="props.info"
              v-if="props.domShow"
              :data="props.info.remarks"
              :title="props.info.text"
              :row="4"
            ></TextMax>
          </div>
          <div class="remarks2" :class="{ 'null-sub-title': !props.info.subTitle }" v-else-if="props.info.remarks">
            <TextMax
              :infoData="props.info"
              v-if="props.domShow"
              :data="props.info.remarks"
              :title="props.info.text"
              :row="5"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'free9Style1',
});
</script>
<script lang="ts" setup>
import { publicUrls } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { urls } from '@/utils/request/upload';
import { defineComponent, ref } from 'vue';
import TextMax from '@/freeComponents/textMode/TextMax9.vue';
import videoview from './../../../videoDialog/videoview.vue';
import digitalShowroomIcon from '@/freeComponents/unitdigitalShowroom/style9.vue';
const props = defineProps({
  info: {
    type: Object,
  },
  domShow: {
    type: Boolean,
  },
});

const ImgVisible = ref(false);
const audioRef = ref(null);
const videoRef = ref(null);
const isPlay = ref(false);
const store = useProjectStore();
const audioplay = (flag: boolean = true) => {
  if (audioRef.value.paused && flag) {
    audioRef.value.play();
    if (videoRef.value) {
      videoRef.value.pause();
    }

    isPlay.value = true;
  } else {
    audioRef.value.pause();
    isPlay.value = false;
  }
};

const videoplay = () => {
  if (videoRef.value.paused) {
    videoRef.value.play();
    if (audioRef.value) {
      audioRef.value.pause();
    }

    isPlay.value = false;
  } else {
    videoRef.value.pause();
    isPlay.value = true;
  }
};
</script>

<style lang="less" scoped>
.outline-parent {
  position: relative;
  -webkit-box-reflect: below 220px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  margin: 0 60px;
}
.outline-parent-bg {
  position: relative;
  width: 750px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 90px;
  padding: 70px 0;
  display: flex;
  justify-content: center;
}
.showroom-parent {
  position: absolute;
  bottom: 80px;
  right: 17px;
  width: 40px;
  height: 40px;
}
.audio-box {
  position: absolute;
  bottom: 22px;
  right: 17px;
  background-color: #f3eadb;
  border-radius: 50%;
  border: 2px solid #a39680;
  width: 40px;
  height: 40px;
  // box-shadow: 0.4px 0.4px 1px 0px #7a6c57 inset;
  display: flex;
  align-items: center;
  justify-content: center;
  .doorIcon {
    font-size: 24px;
    color: #8a7a6a;
  }
}
.audio-rotate {
  animation: audio-rotate 3s linear infinite;
  @keyframes audio-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.audio-btn {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.audio-box:hover {
  background-color: #e8e1d4;
  // .hover-btn {
  //   display: block;
  // }
  // .null-hover {
  //   display: none;
  // }
}
// .null-hover {
//   display: block;
// }
// .hover-btn {
//   display: none;
// }
.auxiliary-content-box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.only-img-video {
  flex-direction: column;
  .auxiliary-img-box {
    order: 1;
    width: 500px;
    height: 200px;
    margin-right: 0;
  }
  .remarks1 {
    margin-top: 16px;
  }
}
.auxiliary-img-box {
  width: 220px;
  height: 260px;
  flex-shrink: 0;
  margin-right: 10px;
}
.auxiliary-img {
  width: 100%;
  height: 100%;
  background-color: #dcceb9;
}
.auxiliary-text-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.title {
  flex-shrink: 0;
  width: 330px;
  color: #8a7a6a;
  text-align: center;

  /* 三级标题 */
  font-family: 'SourceHanSerifCN';
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; /* 150% */
}
.sub-title {
  flex-shrink: 0;
  width: 330px;
  color: #333;
  text-align: center;

  /* 三级副标 */
  font-family: 'SourceHanSerifCN';
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 175% */
  margin-top: 10px;
}
.null-img {
  width: auto;
  white-space: nowrap;
  margin-top: 12px;
}
.remarks1 {
  flex-shrink: 0;
  width: 330px;
  margin-top: 20px;
}
.remarks2 {
  flex-shrink: 0;
  width: 510px;
  margin-top: 20px;
}
.null-sub-title {
  margin-top: 40px;
}
</style>
